.gui-toast-container{ display:none; position:fixed; left:0; right:0; bottom:0; top:0; z-index:-1}
.gui-toast-container .conBox{ display:none}
.gui-toast-container.show{ display:block; z-index:999}
.gui-toast-container.show.loading .conBox.loadingBox{ display:block}
.gui-toast-container.show.success .conBox.successBox{ display:block}
.gui-toast-container .toastBox{
    display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;    /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
    display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

    /*垂直居中*/
    /*老版本语法*/
    -webkit-box-align: center;
    -moz-box-align: center;
    /*混合版本语法*/
    -ms-flex-align: center;
    /*新版本语法*/
    -webkit-align-items: center;
    align-items: center;

    /*水平居中*/
    /*老版本语法*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
    /*混合版本语法*/
    -ms-flex-pack: center;
    /*新版本语法*/
    -webkit-justify-content: center;
    justify-content: center;

    height: 100%;
    width: 100% /* needed for Firefox */
}
.gui-toast-container .toastBox .toastBoxCon{
    position:relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.gui-toast-container .toastBox .con{
    padding:25px 20px;
    text-align:center;
    border-radius:5px;
    color:#fff;
    background:rgba(0,0,0,0.7);
}

.gui-toast-container .toastBox .iconfont{ font-size:24px; font-weight:bold}

.gui-toast-container .loadingBox{ position:relative; padding:5px 0 25px;}
.gui-toast-container .loadingBox .textBox{ position:relative; top:30px;}
.gui-toast-container .weui_loading{
    position: absolute;
    left: 50%;
    top: 24%;
}
.gui-toast-container .weui_loading_leaf{
    position: absolute;
    top: -1px;
    opacity: 0.25;
    &:before{
        content:" ";
        position: absolute;
        width: 8.14px;
        height: 3.08px;
        background: rgb(209, 209, 213);
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
        border-radius: 1px;
        transform-origin: left 50% 0px;
    }
    &_0{
        animation: opacity-60-25-0-12 1.25s linear infinite;
        &:before{
            transform: rotate(0deg) translate(7.92px, 0px);
        }
    }
    &_1{
        animation: opacity-60-25-1-12 1.25s linear infinite;
        &:before{
            transform: rotate(30deg) translate(7.92px, 0px);
        }
    }
    &_2{
        animation: opacity-60-25-2-12 1.25s linear infinite;
        &:before{
            transform: rotate(60deg) translate(7.92px, 0px);
        }
    }
    &_3{
        animation: opacity-60-25-3-12 1.25s linear infinite;
        &:before{
            transform: rotate(90deg) translate(7.92px, 0px);
        }
    }
    &_4{
        animation: opacity-60-25-4-12 1.25s linear infinite;
        &:before{
            transform: rotate(120deg) translate(7.92px, 0px);
        }
    }
    &_5{
        animation: opacity-60-25-5-12 1.25s linear infinite;
        &:before{
            transform: rotate(150deg) translate(7.92px, 0px);
        }
    }
    &_6{
        animation: opacity-60-25-6-12 1.25s linear infinite;
        &:before{
            transform: rotate(180deg) translate(7.92px, 0px);
        }
    }
    &_7{
        animation: opacity-60-25-7-12 1.25s linear infinite;
        &:before{
            transform: rotate(210deg) translate(7.92px, 0px);
        }
    }
    &_8{
        animation: opacity-60-25-8-12 1.25s linear infinite;
        &:before{
            transform: rotate(240deg) translate(7.92px, 0px);
        }
    }
    &_9{
        animation: opacity-60-25-9-12 1.25s linear infinite;
        &:before{
            transform: rotate(270deg) translate(7.92px, 0px);
        }
    }
    &_10{
        animation: opacity-60-25-10-12 1.25s linear infinite;
        &:before{
            transform: rotate(300deg) translate(7.92px, 0px);
        }
    }
    &_11{
        animation: opacity-60-25-11-12 1.25s linear infinite;
        &:before{
            transform: rotate(330deg) translate(7.92px, 0px);
        }
    }
}
@-webkit-keyframes opacity-60-25-0-12 {
    0% { opacity: 0.25; }
    0.01% { opacity: 0.25; }
    0.02% { opacity: 1; }
    60.01% { opacity: 0.25; }
    100% { opacity: 0.25; }
}@-webkit-keyframes opacity-60-25-1-12 {
     0% { opacity: 0.25; }
     8.34333% { opacity: 0.25; }
     8.35333% { opacity: 1; }
     68.3433% { opacity: 0.25; }
     100% { opacity: 0.25; }
 }@-webkit-keyframes opacity-60-25-2-12 {
      0% { opacity: 0.25; }
      16.6767% { opacity: 0.25; }
      16.6867% { opacity: 1; }
      76.6767% { opacity: 0.25; }
      100% { opacity: 0.25; }
  }@-webkit-keyframes opacity-60-25-3-12 {
       0% { opacity: 0.25; }
       25.01% { opacity: 0.25; }
       25.02% { opacity: 1; }
       85.01% { opacity: 0.25; }
       100% { opacity: 0.25; }
   }@-webkit-keyframes opacity-60-25-4-12 {
        0% { opacity: 0.25; }
        33.3433% { opacity: 0.25; }
        33.3533% { opacity: 1; }
        93.3433% { opacity: 0.25; }
        100% { opacity: 0.25; }
    }@-webkit-keyframes opacity-60-25-5-12 {
         0% { opacity: 0.270958333333333; }
         41.6767% { opacity: 0.25; }
         41.6867% { opacity: 1; }
         1.67667% { opacity: 0.25; }
         100% { opacity: 0.270958333333333; }
     }@-webkit-keyframes opacity-60-25-6-12 {
          0% { opacity: 0.375125; }
          50.01% { opacity: 0.25; }
          50.02% { opacity: 1; }
          10.01% { opacity: 0.25; }
          100% { opacity: 0.375125; }
      }@-webkit-keyframes opacity-60-25-7-12 {
           0% { opacity: 0.479291666666667; }
           58.3433% { opacity: 0.25; }
           58.3533% { opacity: 1; }
           18.3433% { opacity: 0.25; }
           100% { opacity: 0.479291666666667; }
       }@-webkit-keyframes opacity-60-25-8-12 {
            0% { opacity: 0.583458333333333; }
            66.6767% { opacity: 0.25; }
            66.6867% { opacity: 1; }
            26.6767% { opacity: 0.25; }
            100% { opacity: 0.583458333333333; }
        }@-webkit-keyframes opacity-60-25-9-12 {
             0% { opacity: 0.687625; }
             75.01% { opacity: 0.25; }
             75.02% { opacity: 1; }
             35.01% { opacity: 0.25; }
             100% { opacity: 0.687625; }
         }@-webkit-keyframes opacity-60-25-10-12 {
              0% { opacity: 0.791791666666667; }
              83.3433% { opacity: 0.25; }
              83.3533% { opacity: 1; }
              43.3433% { opacity: 0.25; }
              100% { opacity: 0.791791666666667; }
          }@-webkit-keyframes opacity-60-25-11-12 {
               0% { opacity: 0.895958333333333; }
               91.6767% { opacity: 0.25; }
               91.6867% { opacity: 1; }
               51.6767% { opacity: 0.25; }
               100% { opacity: 0.895958333333333; }
           }
